<!-- 维修记录 -->
<template>
  <card class="insure-card" :headerStyle="{ paddingTop: '4px' }" title="维修记录信息" :showDivider="false">
    <table-index class="insure-card-table" :table="tableCompulsory" @loadData="loadCompulsoryData">
      <template #repairItems="{ record }">
        <div v-if="record.repairItemNames != null">
          <template v-if="record.repairItemNames && record.repairItemNames.length > 0">
            <more-popup :list="record.repairItemNames" />
          </template>
        </div>
      </template>
      <template #bindOrder="{ record }">
        <div v-if="record.orderNo">
          <a-link v-if="record.orderNo" type="link" @click="() => onLink(record)">{{ record.orderNo }}</a-link>
          <div>交车人：{{ record.giveStaffName || '-' }}</div>
        </div>
        <div v-else>-</div>
      </template>
    </table-index>
  </card>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import { useTable } from '@/hooks/table'
  import { carRepairFindDetail } from '@/api/asset/car'

  import { useRoute } from 'vue-router'
  const route = useRoute()
  const routePrams = route.params
  const carId = ref(null)

  const onLink = (record) => {
    navigateTo(`/short-order/detail/${record.orderId}`, `${record.orderCode}-短租详情`)
  }

  onMounted(() => {
    console.log('routePrams.id', routePrams.id)
    carId.value = routePrams.id
    loadCompulsoryData()
  })

  const loadCompulsoryData = () => {
    const param = {
      withDetail: true,
      carId: Number(carId.value),
      pageNumber: 1,
      pageSize: 1000,
    }
    tableCompulsory.tableLoading = true
    carRepairFindDetail(param)
      .then((res) => {
        const result = res.result
        var data = result.data
        data.forEach((e) => {
          if (e.repairItemNames) {
            e.repairItemNames = e.repairItemNames.split(',')
          }
        })
        tableCompulsory.dataList = data
      })
      .finally(() => {
        tableCompulsory.tableLoading = false
      })
  }
  // table 配置
  const tableCompulsory = useTable({
    pagination: false,
    columns: [
      { title: '维修单号', dataIndex: 'repairNo', width: 140, fixed: 'left' },
      { title: '修理厂', dataIndex: 'repairShop', width: 220 },
      { title: '入厂日期', dataIndex: 'arrivalTime', width: 180 },
      { title: '出厂日期', dataIndex: 'leaveTime', width: 180 },
      { title: '入厂里程', dataIndex: 'entranceKilometre', unit: '公里', width: 140 },
      { title: '出厂里程', dataIndex: 'exportKilometre', unit: '公里', width: 140 },
      { title: '关联单号', dataIndex: 'order', slotName: 'bindOrder', width: 240 },
      { title: '维修项目', dataIndex: 'repairItemNames', slotName: 'repairItems', width: 180 },
      { title: '费用总计', dataIndex: 'repairAmount', unit: '元', width: 220 },
      { title: '维修状态', dataIndex: 'statusStr', width: 90 },
      // { title: '结算状态', dataIndex: 'insureStatusStr', width: 120 },
      { title: '负责人', dataIndex: 'undertaker', width: 120 },
    ],
  })
</script>
<style lang="less" scoped>
  .insure-card {
    .insure-card-table {
      :deep {
        .odd-tr {
          > td {
            background-color: #e5e6eb;
          }
        }
        .insure-current {
          td {
            background-color: #e7eeff;
          }
          &:hover {
            > td {
              background-color: #e7eeff !important;
            }
            .arco-table-td.arco-table-col-fixed-right::before,
            .arco-table-td.arco-table-col-fixed-left::before {
              background-color: #e7eeff !important;
            }
          }
        }
        .arco-table-tr-expand {
          background: #e5e6ebff;
          > .arco-table-td > .arco-table-cell {
            padding: 30px 221px;
          }
        }
        .arco-table-expand-btn {
          width: 20px;
          height: 20px;
          background-color: inherit;
        }
      }
    }
    .insure-card-table-border {
      :deep {
        .arco-table-border .arco-table-tr .arco-table-th {
          border-bottom: none;
        }
      }
    }
  }
  .link {
    font-size: 14px;
    color: #165dff;
    cursor: pointer;
  }

  .auth-nums {
    display: inline-block;
    background-color: #1890ff;
    border-radius: 10px;
    padding: 0 7px;
    color: #fff;
  }
  .auth-nums {
    display: inline-block;
    background-color: #1890ff;
    border-radius: 10px;
    padding: 0 7px;
    color: #fff;
  }
  .pop-orgs {
    max-width: 760px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    div {
      background: #f2f3f5;
      margin-right: 10px;
      margin-bottom: 10px;
      padding: 2px 6px;
      border-radius: 2px;
      color: #1d2129;
      font-weight: 600;
      word-break: break-all;
    }
  }
</style>
